<template>
  <a-modal
    title="选择人员"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-tree-select
        v-model="orgvalue"
        style="width: 40%"
        :tree-data="orgTree"
        search-placeholder="Please select"
        @change="orgChange"
        :allowClear="true"
      />
      <a-transfer
        :data-source="mockData"
        :titles="['Source', 'Target']"
        :target-keys="targetKeys"
        :selected-keys="selectedKeys"
        :render="item => item.name"
        @change="handleChange"
        @selectChange="handleSelectChange"
        @scroll="handleScroll"
      />

    </a-spin>
  </a-modal>
</template>

<script>
  import { courseTypeEdit } from '@/api/modular/garden/courseManage'
  import { getOrgPage, getOrgTree } from '@/api/modular/system/orgManage'
  import { getUserPage } from '@/api/modular/system/userManage'
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import moment from 'moment';
  export default {
    props: {
      selectDatas: {type: Array}
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        mockData: [],
        oriTargetKeys:[],
        selectedKeys: [],
        targetKeys: [],
        orgTree: [],
        orgvalue: '',
        SHOW_PARENT,
        allusers: [],
      }
    },
    mounted(){
      this.getOrgTree();
      this.getOrgMenbers(null);
    },
    watch: {
      selectDatas(vals){
        if(vals && vals.length){
          this.targetKeys = vals;
          console.log('到时-------------', this.targetKeys)
        }
      },
    },
    methods: {
      moment,
      orgChange(value, label, extra){
        console.log(value, label, extra)
        this.getOrgMenbers(value)
      },
      getOrgMenbers(value){
        let parameter = {
          pageNo:1,
          pageSize:100,
          organizationId:value
        }
        getUserPage(parameter).then((res) => {
          if(res.code == 200){
            let _data = res.data.rows.map(item => {
              let idx = this.allusers.findIndex(_u => {return _u.id === item.id})
              if(idx < 0){
                this.allusers.push(item)
              }
              item['key'] = item.id;
              item['title'] = item.name;
              item['description'] = '';
              return item;
            });
            this.mockData = _data;
            console.log(this.mockData)
          }
        })
      },
      // 初始化方法
      edit () {
        this.visible = true;
        this.$nextTick(() => {
          
          // this.form.setFieldsValue(
          //   {
          //     id: record.id,
          //     name: record.name,
          //     isPublic: record.isPublic,
          //     sort: record.sort,
          //     description: record.description,
          //   }
          // )
        })
      },
      getOrgTree () {
        getOrgTree().then(res => {
          if (!res.success) {
            return
          }
          this.orgTree = res.data;
        })
      },
      handleChange(nextTargetKeys, direction, moveKeys) {
        this.targetKeys = nextTargetKeys;

        console.log('targetKeys: ', nextTargetKeys);
        // console.log('direction: ', direction);
        // console.log('moveKeys: ', moveKeys);
      },
      handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
        this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];

        // console.log('sourceSelectedKeys: ', sourceSelectedKeys);
        // console.log('targetSelectedKeys: ', targetSelectedKeys);
      },
      handleScroll(direction, e) {
        // console.log('direction:', direction);
        // console.log('target:', e.target);
      },

      handleSubmit () {
        let _users = [];
        this.targetKeys.forEach(item => {
          let user = this.allusers.find(_u => {return _u.id == item})
          if(user){
            _users.push(user)
          }
        })
        this.$emit('chuansuook', _users)
        this.visible = false;
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false;
        this.selectedKeys = [];
        this.targetKeys = [];
      }
    }
  }
</script>
